<template>
  <div class="problem-comments-tab">
    <div class="comments-content">
      <div class="comments-header">
        <h3>讨论区</h3>
        <a-button type="primary" @click="showAddComment = true">
          <plus-outlined />
          发表评论
        </a-button>
      </div>

      <!-- 评论统计 -->
      <div class="comments-stats">
        <div class="stats-item">
          <span class="stats-number">{{ comments.length }}</span>
          <span class="stats-label">条评论</span>
        </div>
        <div class="stats-item">
          <span class="stats-number">{{ activeUsers }}</span>
          <span class="stats-label">位参与者</span>
        </div>
      </div>

      <!-- 添加评论表单 -->
      <div class="add-comment-form" v-if="showAddComment">
        <a-textarea
          v-model:value="newComment"
          placeholder="分享你的解题思路或疑问..."
          :rows="4"
          class="comment-input"
        />
        <div class="form-actions">
          <a-button @click="showAddComment = false">取消</a-button>
          <a-button type="primary" @click="addComment" :loading="submitting">
            发表评论
          </a-button>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comments-list">
        <div v-if="comments.length === 0" class="no-comments">
          <div class="no-comments-icon">
            <message-outlined />
          </div>
          <div class="no-comments-text">
            <h4>暂无评论</h4>
            <p>成为第一个发表评论的人吧！分享你的解题思路或提出疑问。</p>
          </div>
        </div>

        <div v-else class="comment-item" v-for="comment in comments" :key="comment.id">
          <div class="comment-avatar">
            <a-avatar :size="40" :src="comment.userAvatar">
              {{ comment.userName?.charAt(0) }}
            </a-avatar>
          </div>
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">{{ comment.userName }}</span>
              <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
            </div>
            <div class="comment-text">{{ comment.content }}</div>
            <div class="comment-actions">
              <a-button type="text" size="small" @click="likeComment(comment.id)">
                <like-outlined :class="{ liked: comment.isLiked }" />
                {{ comment.likeCount || 0 }}
              </a-button>
              <a-button type="text" size="small" @click="replyComment(comment.id)">
                <message-outlined />
                回复
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import {
  PlusOutlined,
  MessageOutlined,
  LikeOutlined
} from '@ant-design/icons-vue'

interface Props {
  questionData?: API.Question
}

interface Comment {
  id: string
  userName: string
  userAvatar?: string
  content: string
  createTime: string
  likeCount: number
  isLiked: boolean
}

const props = defineProps<Props>()

// 评论相关状态
const showAddComment = ref(false)
const newComment = ref('')
const submitting = ref(false)

// 模拟评论数据
const comments = ref<Comment[]>([
  {
    id: '1',
    userName: '算法小白',
    userAvatar: '',
    content: '这道题目很适合初学者练习，主要考查基本的输入输出操作。建议先理解题目要求，然后直接按照要求输出即可。',
    createTime: '2024-01-15T10:30:00Z',
    likeCount: 5,
    isLiked: false
  },
  {
    id: '2',
    userName: '编程达人',
    userAvatar: '',
    content: '虽然题目简单，但要注意输入输出的格式。在实际编程中，这种基础题目有助于熟悉编程环境和语法。',
    createTime: '2024-01-15T14:20:00Z',
    likeCount: 3,
    isLiked: true
  }
])

// 计算活跃用户数
const activeUsers = computed(() => {
  const users = new Set(comments.value.map(c => c.userName))
  return users.size
})

// 添加评论
const addComment = async () => {
  if (!newComment.value.trim()) {
    message.warning('请输入评论内容')
    return
  }

  submitting.value = true
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const comment: Comment = {
      id: Date.now().toString(),
      userName: '当前用户',
      content: newComment.value,
      createTime: new Date().toISOString(),
      likeCount: 0,
      isLiked: false
    }
    
    comments.value.unshift(comment)
    newComment.value = ''
    showAddComment.value = false
    message.success('评论发表成功')
  } catch (error) {
    message.error('发表评论失败')
  } finally {
    submitting.value = false
  }
}

// 点赞评论
const likeComment = (commentId: string) => {
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    comment.isLiked = !comment.isLiked
    comment.likeCount += comment.isLiked ? 1 : -1
  }
}

// 回复评论
const replyComment = (commentId: string) => {
  message.info('回复功能开发中...')
}

// 格式化时间
const formatTime = (timeStr: string) => {
  const time = new Date(timeStr)
  const now = new Date()
  const diff = now.getTime() - time.getTime()
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return time.toLocaleDateString()
  }
}
</script>

<style scoped>
.problem-comments-tab {
  height: 100%;
  overflow-y: auto;
}

.comments-content {
  padding: 20px 24px;
}

.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.comments-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0;
}

.comments-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stats-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stats-number {
  font-size: 20px;
  font-weight: 600;
  color: #1890ff;
}

.stats-label {
  font-size: 14px;
  color: #666;
}

.add-comment-form {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.comment-input {
  margin-bottom: 12px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.no-comments-icon {
  font-size: 48px;
  color: #d9d9d9;
  margin-bottom: 16px;
}

.no-comments-text h4 {
  font-size: 18px;
  color: #666;
  margin-bottom: 8px;
}

.no-comments-text p {
  color: #999;
  line-height: 1.6;
  max-width: 400px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.comment-avatar {
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 500;
  color: #1f1f1f;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  color: #333;
  line-height: 1.6;
  margin-bottom: 12px;
}

.comment-actions {
  display: flex;
  gap: 16px;
}

.comment-actions .ant-btn {
  padding: 0;
  height: auto;
  color: #666;
}

.comment-actions .liked {
  color: #1890ff;
}

/* 自定义滚动条 */
.problem-comments-tab::-webkit-scrollbar {
  width: 6px;
}

.problem-comments-tab::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 3px;
}

.problem-comments-tab::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.problem-comments-tab::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
</style>
